<!DOCTYPE html>

<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
	<head>
		<title>主页</title>
	</head>
<div th:replace="~{commons/template::style}"></div>
		<script>
			$.ready(
					$.ajax({
						url:"/indexRequest",
						type:"post",
						success:function (data) {
							$("#accountName").html("&nbsp&nbsp您好！&nbsp&nbsp&nbsp").append(data.name)
							var html = "<div class=\"col-md-12\" align=\"center\"><h2>您的信息</h2><input type='button' value='修改密码' name='"+data.id+"'></div>"+
									"<div class=\"row\">\n" +
									"  <div class=\"col-md-3\"></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4 class=\"text-danger\">ID号</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4>"+data.id+"</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4 class=\"text-danger\">姓名</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4>"+data.name+"</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4 class=\"text-danger\">性别</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4>"+data.sex+"</h4></div>\n" +
									"  <div class=\"col-md-3\"></div>\n" +
									"</div>"+
									"<div class=\"row\">\n" +
									"  <div class=\"col-md-3\"></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4 class=\"text-danger\">国别</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4>中国</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4 class=\"text-danger\">学院</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4>"+data.college+"</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h4 class=\"text-danger\">注册时间</h4></div>\n" +
									"  <div class=\"col-md-1\" align=\"center\"><h5>"+data.registerTime+"</h5></div>\n" +
									"  <div class=\"col-md-3\"></div>\n" +
									"</div>"
							var obj = $(html);
							$("#tab1").append(obj);
						}
					})
			)
		</script>
	<body>
		<div th:replace="~{commons/template::head}"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace="~{commons/template::leftSide(active='index')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<div class="table-responsive">
						<table class="table table-striped table-sm" id="tab1">
						</table>
					</div>
				</main>
			</div>
		</div>
		<!-- 模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<form id="form">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title">修改密码</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						</div>
						<div class="modal-body" id="content">
							<tr>
								<td align="center">
									<span >您的ID：</span><input id="userId" type="text" placeholder="id" name="userId" readonly>
								</td>
							</tr>
							<tr>
								<td align="center">
									<span >输入新密码：</span><input id="newPWD" type="text" placeholder="6-16位的中英数字特殊字符" name="newPWD" oninput="change()">
								</td>
							</tr>
							<tr>
								<td>
									<p id="tips" class="text-danger"></p>
								</td>
							</tr>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
							<button type="button" class="btn btn-primary" id="save">保存</button>
						</div>
					</div><!-- /.modal-content -->
				</form>
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<div th:replace="~{commons/template::script}"></div>
	</body>
<script>
	$("#tab1").on("click","input[value='修改密码']",function () {
		$("#newPWD").val("");
		$("#userId").val(this.name);
		$("#myModal").modal('show');
	})
	function change() {
		var pwd = $('#newPWD').val();
//这里设置正则表达式 //这在下划线之间 ^是指从头开始 $到哪里结束
		//1代表第一位必须是1   [345]第二位必须是345 [0-9]{9} 值得是后九位必须是0-9之间的数字
		var r =/^[0-9A-Za-z]{6,16}$/;
		var z =/^(?=.{6,16})[0-9A-Za-z]*[^0-9A-Za-z][0-9A-Za-z]*$/;
		var q =/^(?=.{6,16})([0-9A-Za-z]*[^0-9A-Za-z][0-9A-Za-z]*){2,}$/;
		var xt =/([0-9a-zA-Z])\1{2}/;
		var lh =/(0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){2}\d/;
		//res是正则表达式 .test() 验证正则  括号填写需要验证的值
		if (pwd.length<6){
			$("#tips").html("密码长度不能小于6！");
			$("#save").attr("disabled","disabled");
		}else if(pwd.length>16){
			$("#tips").html("密码长度不能大于16！");
			$("#save").attr("disabled","disabled");
		}else if (xt.test(pwd)){
			$("#tips").html("密码不能使用连续相同的数字或字符！");
			$("#save").attr("disabled","disabled");
		}else if (lh.test(pwd)){
			$("#tips").html("密码不能使用连号！");
			$("#save").attr("disabled","disabled");
		} else if (r.test(pwd)){
			$("#tips").html("密码强度：【弱】");
			$("#save").removeAttr("disabled");
		}else if (z.test(pwd)){
			$("#tips").html("密码强度：【中】");
			$("#save").removeAttr("disabled");
		}else if (q.test(pwd)){
			$("#tips").html("密码强度：【强】");
			$("#save").removeAttr("disabled");
		}
	}
	$("#save").click(function () {
		$.ajax({
			url: "updatePWD",
			data:{userId:$("#userId").val(),newPWD:$("#newPWD").val()},
			type: "post",
			dataType:"json",
			success:function (msg) {
				if (msg.state) {
					alert(msg.message);
					window.location.href = "http://localhost:8080";
				}else {
					$("#tips").html(msg.message);
				}
			}
		})
	})
</script>
</html>